<template>
  <div class="vol_meeting">
    <base-search placeholder="参会者姓名" @search="clickSearch"></base-search>
    <div class="vol_meeting_list">
      <van-list
        v-if="params.list.length || !params.loading"
        v-model:loading="params.loading"
        :finished="params.list.length >= params.total"
        @load="loadMore"
      >
        <van-empty v-if="!params.list.length" description="暂无参会者" />
        <div
          class="mb-3"
          v-for="item in params.list"
          :key="item.id"
          :item="item"
        >
          <base-card :title="item.topic">
            <div class="card-container">
              <van-cell title="设备">{{ item.meetingCode }}</van-cell>
              <van-cell title="IP地址">{{ item.shapeDesc }}</van-cell>
              <van-cell title="位置">{{ item.stateDesc }}</van-cell>
              <van-cell title="网络类型">{{ item.startTime }}</van-cell>
              <van-cell title="数据中心">{{ item.meetingCode }}</van-cell>
              <van-cell title="连接类型">{{ item.shapeDesc }}</van-cell>
              <van-cell title="加入时间">{{ item.stateDesc }}</van-cell>
              <van-cell title="离开时间">{{ item.startTime }}</van-cell>
            </div>
          </base-card>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { inject } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const api = inject("api");
const params = reactive({
  loading: true,
  page: 1,
  limit: 10,
  list: [],
  meetingName: "",
  total: 0,
});

const load = async () => {
  try {
    params.loading = true;
    const res = await api.meetingList({
      limit: params.limit,
      page: params.page,
      topic: params.meetingName,
    });

    params.loading = false;

    if (!res.code) {
      params.total = res.data.total;
      if (params.page == 1) {
        params.list = res.data.list;
      } else {
        params.list = [...params.list, ...res.data.list];
      }
    }
  } catch (err) {
    params.loading = false;
  }
};

function loadMore() {
  if (params.list.length < params.total) {
    params.page++;
    load();
  }
}

function init() {
  params.page = 1;
  load();
}
function clickSearch(val) {
  params.meetingName = val;
  init();
}

onMounted(() => {
  init();
});
</script>

<style scoped>
.vol_meeting {
  padding-bottom: 200px;
}
.apply_meeting_btn {
  position: fixed;
  bottom: 100px;
  width: 100%;
  box-sizing: border-box;
}
.apply_meeting_btn_main {
  width: 50%;
  margin: 0 auto;
}
</style>
